<template>
	<view class="contre">
		<view class="containerone">
			<u--image width="680rpx" height="680rpx" radius="14rpx" :src="imgUrl + drawVideo"></u--image>
		</view>
		<view class="containertow">
			<view class="containertow1">Go Go Duck</view>
			<view class="containertow2">
				<view>编号</view>
				<view>#{{ number }}</view>
			</view>
		</view>
		<view class="shi-body">
			<view class="shi-body-price">
				<view class="price-box">
					<view class="box1">设置价格</view>
					<view class="box2">（市场GoGoDuck实时价：{{ lowerPrice ? lowerPrice.toFixed(2) : 0 }}）</view>
				</view>
				<view class="">
					<u--input color="#fff" type="number" prefixIconStyle="font-size:30rpx;color: #909399"
						v-model="myprice" prefixIcon="rmb" placeholder="请输入价格" border="bottom"
						placeholderStyle="fontSize:20rpx" clearable></u--input>
				</view>
				<view class="foot-price">
					<view class="total-price">总售价 ：</view>
					<view class="totalprice">￥{{ myprice ? myprice : 0 }}</view>
				</view>
				<view class="foot-price">
					<view class="total-price">服务费（{{ cost }}%）</view>
					<view class="totalprice">￥{{ myprice * cost * 0.01 }}</view>
				</view>
				<view class="foot-price">
					<view class="total-price">预计收入 ：</view>
					<view class="totalprice">￥{{ myprice * (1 - cost * 0.01) }}</view>
				</view>
			</view>
		</view>
		<view class="xieyi">
			<u--image width="30rpx" height="30rpx" style="margin-right: 15rpx" v-show="!checked" @click="onchecked"
				:src="imgUrl + '/static/newImage/nochecked.png'" alt=""></u--image>
			<u--image width="30rpx" height="30rpx" style="margin-right: 15rpx" v-show="checked" @click="onchecked"
				:src="imgUrl + '/static/newImage/checked.png'" alt=""></u--image>
			<view class="txt">
				<text>我已阅读并同意</text>
				<text @click="gonotice" style="color: #3b82c4">《Go Go Duck转卖须知》</text>
			</view>
		</view>
		<view class="notice">
			<view class="" style="margin-bottom: 17rpx">GoGoDuck寄售须知：</view>
			<view class="" style="margin-bottom: 8rpx">一、寄售收入在扣除综合服务费 ({{ cost }}%)后，自动转入钱包余额。</view>
			<view style="margin-bottom: 8rpx">二、寄售收入的增值部分，请您主动申报个人所得税。</view>
			<view class="">三、注意:同一账号短时间内累计取消3次订单，将会被限购一段时间。</view>
		</view>
		<view class="snapped_up">
			<view @click="gomessage" class="Cancel_button">藏馆</view>
			<view @click="confirmSale" class="purchase_button">立即寄售</view>
		</view>
		<!-- 弹出层 -->
		<u-popup zIndex="200000" mode="center"
			customStyle="width:650rpx;height:300rpx;border-radius:14rpx;margin-bottom:200rpx" :closeable="true"
			:show="show" @close="close">
			<view class=""
				style="font-size: 30rpx; font-weight: 800; text-align: center; position: absolute; top: 30rpx; left: 35%">
				请输安全密码</view>
			<view class="dialog-box">
				<u-code-input v-model="safepassword" mode="box" dot></u-code-input>
			</view>
			<view class="clpmklj">
				<view class="box1" @click="close">取消</view>
				<view class="box2" @click="throttleConfirm">确认</view>
			</view>
		</u-popup>
		<!-- 弹出层 -->
	</view>
</template>

<script>
	import config from '@/config';
	import {
		getPriceAscOne,
		getmonConsignment
	} from '@/api/venue/venue.js';
	export default {
		data() {
			return {
				checked: false,
				show: false,
				numbers: 0,
				imgUrl: config.gillUrl,
				cost: uni.getStorageSync('COST'),
				lowerPrice: 0,
				safepassword: '',
				myprice: null,
				id: 0,
				number: null,
				hashValue: '',
				drawVideo: '',
				price: '',
				subject: '',
				throttling: false // 初始时不处于节流状态
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.number = option.number;
			this.hashValue = option.hashValue;
			this.drawVideo = option.drawVideo;
			this.price = option.price;
			this.subject = option.subject;
		},
		created() {
			this.getPrice();
			// console.log(this.subject, 'this.drawVideo');
		},
		// onLoad(option) {
		// 	this.imgRets = option.imgUrl
		// 	this.numbers = option.id
		// },
		methods: {
			gonotice() {
				uni.navigateTo({
					url: '/pages/consignment/notice'
				});
			},
			onchecked() {
				// 判断 转卖须知
				if (this.checked == false) {
					this.checked = true;
				} else if (this.checked == true) {
					this.checked = false;
				}
			},
			async getlowprice() {
				const data = await getPropRealTime();
				// console.log(data, 'data');
				this.lowPrice = data.data.unitPrice;
			},
			throttleConfirm() {
				if (!this.throttling) {
					// 如果没有处于节流状态，执行你的按钮点击逻辑
					this.confirmOnsale();
					// 设置节流状态为 true，并在一定时间后恢复为 false
					this.throttling = true;
					setTimeout(() => {
						this.throttling = false;
					}, 2000); // 1000毫秒（1秒）是节流的时间间隔，你可以根据需要调整
				}
			},
			confirmOnsale() {
				if (this.safepassword == '') {
					this.$modal.showToast('请输入您的安全密码！');
					this.show = false;
				} else {
					this.gosuccess();
				}
			},
			async gosuccess() {
				let obj = {};
				obj.consignmentPrice = this.myprice;
				obj.securityPassword = this.safepassword;
				const data = await getmonConsignment(this.id, obj);
				if (data.code == 200) {
					this.$modal.showToast('寄售成功！');
					this.show = false;
					uni.navigateTo({
						url: `/pages/consignment/Successful?propImg=${this.drawVideo}&propName=${this.subject}&id=${this.id}&hashValue=${this.hashValue}&unitPrice=${
						this.myprice * (1 - this.cost * 0.01)
					}`
					});
				} else {
					this.show = false;
					this.safepassword = '';
					this.$modal.showToast(data.msg);
				}
			},
			confirmSale() {
				if (this.myprice == null) {
					this.$modal.showToast('您还没有输入价格！');
				} else if (this.checked == false) {
					this.$modal.showToast('您还没有阅读转卖须知！');
				} else {
					this.show = true;
				}
			},
			totalPrice() {
				this.value = this.ownNumber;
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value);
			},
			keyBoardChange(val) {
				if (val != '.') {
					this.safepassword += val;
				}
			},
			backspace() {
				if (this.safepassword.length) this.safepassword = this.safepassword.substr(0, this.safepassword.length -
				1);
			},
			close() {
				this.show = false;
			},
			async getPrice() {
				const data = await getPriceAscOne();
				this.lowerPrice = data.data.price;
			},
			cancel() {
				this.show = false;
			},
			onchecked() {
				if (this.checked == false) {
					this.checked = true;
				} else if (this.checked == true) {
					this.checked = false;
				}
			},
			goSuccessful() {
				uni.navigateTo({
					url: '/pages/consignment/Successful' // 跳转到目标页面的路径
				});
			},
			gomessage() {
				uni.navigateTo({
					url: '/pages/work/message' // 藏馆
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-input__content {
		margin-left: -10rpx;
	}

	.contre {
		.containerone {
			width: 680rpx;
			height: 680rpx;
			border-radius: 14rpx;
			margin: 10rpx 34.88rpx;
		}

		.containertow {
			margin: 15rpx 34.88rpx;

			.containertow1 {
				font-size: 42rpx;
				font-family: 'index';
				font-weight: 400;
				color: #ffffff;
			}

			.containertow2 {
				width: 680rpx;
				height: 59rpx;
				background: #15142d;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				opacity: 1;
				border-radius: 14rpx;
				margin: 20rpx 0 45rpx;
				display: flex;
				justify-content: space-between;

				view {
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #8a92a3;
					line-height: 59rpx;
					padding: 0 34.88rpx 0 34.88rpx;
				}
			}
		}

		.shi-body {
			background-color: #15142d;
			width: 680rpx;
			height: 384rpx;
			margin: 35rpx;
			border-radius: 14rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			opacity: 1;

			.shi-body-price {
				padding: 17rpx 34rpx;

				.price-box {
					display: flex;

					.box1 {
						height: 38rpx;
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
					}

					.box2 {
						font-size: 20rpx;
						font-family: 'font';
						font-weight: 400;
						color: #8a92a3;
						margin-top: 8rpx;
					}
				}

				.foot-price {
					display: flex;
					justify-content: space-between;
					margin-bottom: 34.88rpx;
					margin-top: 34.88rpx;

					.total-price {
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #8a92a3;
					}

					.totalprice {
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
		}

		.xieyi {
			width: 680rpx;
			height: 30rpx;
			text-align: center;
			padding-left: 25%;
			font-size: 21rpx;
			font-family: 'font';
			font-weight: 400;
			color: #787f8e;
			line-height: 30rpx;
			margin-bottom: 58rpx;
			display: flex;

			img {
				margin-right: 15rpx;
				margin-top: 3rpx;
			}

			.txt {
				font-size: 21rpx;
				font-family: 'font';
				font-weight: 400;
				color: #787f8e;
			}
		}

		.group {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			margin-left: -215rpx;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			opacity: 1;
			margin-top: 4rpx;
		}

		.notice {
			padding-bottom: 150rpx;
			padding-left: 35rpx;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
		}

		// 底部购买
		.snapped_up {
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 155rpx;
			background: #130f26;
			padding: 26.46rpx 34.88rpx;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 700;
			color: #ffffff;

			.Cancel_button {
				width: 209rpx;
				height: 77rpx;
				background: #211f30;
				border-radius: 14rpx;
				border: 2rpx solid #3c424d;
				text-align: center;
				line-height: 77rpx;
			}

			.purchase_button {
				width: 436rpx;
				height: 77rpx;
				background: #46a6f8;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}

		// 底部购买

		.pm {
			height: 10rpx; //不要乱动
		}
	}

	.clpmklj {
		display: flex;
		margin: 30rpx 120rpx;

		.box2 {
			width: 180rpx;
			height: 78rpx;
			text-align: center;
			line-height: 78rpx;
			background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
			border-radius: 16rpx;
			opacity: 1;
			font-size: 31rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}

		.box1 {
			width: 180rpx;
			height: 78rpx;
			text-align: center;
			background: gray;
			margin-right: 60rpx;
			border-radius: 16rpx;
			opacity: 1;
			font-size: 31rpx;
			line-height: 78rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}
	}

	::v-deep .u-fade-enter-active,
	.u-fade-leave-active {
		z-index: 0 !important;
		// background:none !important;
	}

	.dialog-box {
		margin-top: 100rpx;
		width: 560rpx;
		margin-left: 10%;
		z-index: 200000;
	}
</style>